<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三级联动</title>
    <script src="./res/jquery-3.5.1.min.js"></script>
</head>

<body>
    <label for="province">省份</label>
    <select name="province" id="province"></select>
    <label for="city">市</label>
    <select name="city" id="city"></select>
    <label for="district">区</label>
    <select name="district" id="district"></select>
</body>

</html>
<script>
    $(function(e) {
        (21, 0, '辽宁'), (22, 0, '吉林'), (23, 0, '黑龙江')
        let address = new Array();
        address.push({
            id: 21,
            pid: 0,
            name: '辽宁'
        });
        address.push({
            id: 22,
            pid: 0,
            name: '吉林'
        });
        address.push({
            id: 23,
            pid: 0,
            name: '黑龙江'
        });
        address.push({
            id: 2101,
            pid: 21,
            name: '沈阳'
        });
        address.push({
            id: 2103,
            pid: 21,
            name: '鞍山'
        });
        address.push({
            id: 210101,
            pid: 2101,
            name: '市辖区'
        });
        address.push({
            id: 210102,
            pid: 2101,
            name: '和平区'
        });
        address.push({
            id: 210102,
            pid: 2101,
            name: '沈河区'
        });
        address.push({
            id: 2201,
            pid: 22,
            name: '长春'
        });
        address.push({
            id: 2202,
            pid: 22,
            name: '吉林'
        });
        address.push({
            id: 2203,
            pid: 22,
            name: '四平'
        });
        address.push({
            id: 2204,
            pid: 22,
            name: '辽源'
        });
        address.push({
            id: 220101,
            pid: 2201,
            name: '市辖区'
        });
        address.push({
            id: 220202,
            pid: 2201,
            name: '南关区'
        });
        address.push({
            id: 220303,
            pid: 2201,
            name: '宽城区'
        });
        address.push({
            id: 220401,
            pid: 2204,
            name: '市辖区'
        });
        address.push({
            id: 220402,
            pid: 2204,
            name: '龙山区'
        });
        address.push({
            id: 220403,
            pid: 2204,
            name: '西安区'
        });
        address.push({
            id: 220421,
            pid: 2204,
            name: '东丰县'
        });
        address.push({
            id: 220422,
            pid: 2204,
            name: '吉林'
        });

        function initProvince(e) {
            $.each(address, function(index, addr) {
                // $.each(被便利的集合,回调函数(下标,集合中的元素对象))
                // 省份赋值  
                if (addr.id <= 100) {
                    $('#province').append(new Option(addr.name, addr.id));
                } else {
                    return;
                }
            });
        }

        function initCity(id) {
            if (undefined == id) {
                initProvince();
                $.each(address, function(index, addr) {
                    if (addr.id <= 10000 && addr.id > 1000 && addr.pid == $('#province').val()) {
                        $('#city').append(new Option(addr.name, addr.id));
                    } else {
                        return;
                    }
                });
            } else {
                // $('#city').find('option').remove();
                $('#city').empty();
                $.each(address, function(index, addr) {
                    if (addr.id <= 10000 && addr.id > 1000 && addr.pid == id) {
                        $('#city').append(new Option(addr.name, addr.id));
                    } else {
                        return;
                    }
                });
            }
        }

        function initDistrict(id) {
            if (undefined == id) {
                initCity();
                let cityValue = $('#city').val();
                $.each(address, function(index, addr) {
                    if (addr.id <= 1000000 && addr.id > 1000 && addr.pid == cityValue) {
                        $('#district').append(new Option(addr.name, addr.id));
                    } else {
                        return;
                    }
                });
            } else {
                $('#district').empty();
                $.each(address, function(index, addr) {
                    if (addr.id <= 1000000 && addr.id > 10000 && addr.pid == id) {
                        $('#district').append(new Option(addr.name, addr.id));
                    } else {
                        return;
                    }
                });
            }

        }
        initDistrict();
        $('#province').change(function(e) {
            // e.preventDefault();
            initCity($(this).val());
            initDistrict($('#city').val());
        });
        $('#city').change(function(e) {
            // e.preventDefault();
            initDistrict($('#city').val());
        });
    });
</script>